


<!--菜单页面-->
<template>
  <div>
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showAddModel"
        round
        size="small"
        >新增</el-button
      >

      <el-button
        type="info"
        icon="el-icon-s-operation"
        round
        size="small"
        @click="openAll"
        >展开/收起</el-button
      >
    </el-row>
    <el-table
      ref="menuTable"
      :data="treeTable"
      style="width: 100%; margin-bottom: 20px"
      @row-dblclick="rowClick"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="编号" width="150" v-if="flag">
      </el-table-column>

      <el-table-column prop="mName" label="名称" width="200"> </el-table-column>
      <el-table-column prop="sort" label="排序号" width="70"> </el-table-column>

      <el-table-column
        effect="dark"
        prop="type"
        label="类型"
        width="70"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            :type="
              scope.row.type == 1
                ? 'primary'
                : scope.row.type == 2
                ? 'warning'
                : 'success'
            "
            disable-transitions
            >{{
              scope.row.type == 1
                ? "菜单"
                : scope.row.type == 2
                ? "按钮"
                : "目录"
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="mstate" label="权限状态" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mstate"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            @change="changeState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="url" label="菜单URL"> </el-table-column>
      <el-table-column prop="tag" label="授权标识" width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="showEdit(scope.row)"
            type="primary"
            plain
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="success"
            plain
            @click="addEdit(scope.row)"
            >新增</el-button
          >
          <el-button size="mini" type="danger" @click="menuDelOne(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加个编辑弹出框 -->
    <el-dialog title="菜单" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="上级菜单">
          <el-input
            suffix-icon="el-icon-search"
            v-model="form.pname"
            @focus="showParentNode()"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.mname"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio v-model="form.mtype" :label="0">目录</el-radio>
          <el-radio v-model="form.mtype" :label="1">菜单</el-radio>
          <el-radio v-model="form.mtype" :label="2">按钮</el-radio>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="form.mstate" :label="0">禁用</el-radio>
          <el-radio v-model="form.mstate" :label="1">启用</el-radio>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.msort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addOrUpdate == 1 ? addMenu() : updateMenu()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 上级菜单弹出框 -->
    <el-dialog title="上级菜单" :visible.sync="showParentFlag" width="20%">
      <el-tree
        :data="addTreeTable"
        :props="defaultProps"
        @node-click="handleNodeClick"
        draggable
        @node-drop="nodeMove"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showParentFlag = false">取 消</el-button>
        <el-button type="primary" @click="chooseParentId">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //1是添加 0 是修改
      expand: false,
      addOrUpdate: 1,
      flag: false,
      //全部展开
      allShow: false,
      dialogVisible: false,
      showParentFlag: false,
      chooseParam: {
        pname: "",
        id: 1,
      },
      form: {},
      chooseIds: [],
      treeTable: [],
      addTreeTable: [],
      defaultProps: {
        children: "children",
        label: "mName",
      },
    };
  },

  methods: {
    //树节点移动
    nodeMove(beforeNode, afterNode, address) {
      console.log(beforeNode, afterNode, address);
      // //移入后的父节点
      if (address == "inner") {
        var pid = afterNode.data.id;
      } else {
        var pid = afterNode.data.pid;
      }
      //当前节点的id
      var id = beforeNode.data.id;

      this.http({
        url: "menu/updatePid/" + id + "/" + pid,
        method: "put",
      });
    },
    //双击展示当前行菜单
    rowClick(row) {
      //第二个参数是布尔值

      this.$refs.menuTable.toggleRowExpansion(row, row.listStatus);
      row.listStatus = !row.listStatus;
    },
    //展示所有的菜单
    openAll() {
      var all = this.treeTable;
      this.allShow = !this.allShow;
      all.forEach((i) => {
        this.$refs.menuTable.toggleRowExpansion(i, this.allShow);
        if (i.children) {
          this.forArr(i.children, this.allShow);
        }
      });
    },
    //遍历展开
    forArr(row, flag) {
      row.forEach((i) => {
        this.$refs.menuTable.toggleRowExpansion(i, flag);
      });
    },
    //新增
    expandOrClose() {
      if (this.expand) {
        this.expand = false;
      } else {
        this.expand = true;
      }
    },
    addEdit(thisRow) {
      this.addOrUpdate = 1;
      this.form = {};
      this.form = {
        pid: thisRow.id,
        pname: thisRow.mName,
        mtype: 0,
        mstate: 1,
      };
      this.dialogVisible = true;
    },
    //删除一个
    menuDelOne(thisRow) {
      this.chooseIds = [];
      this.chooseIds.push(thisRow.id);
      this.menuDel();
    },
    //删除选中菜单
    menuDel() {
      if (this.chooseIds.length == 0) {
        this.$message({
          message: "未勾选,请勾选后再试!",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http({
            url: "menu/del",
            method: "delete",
            data: this.chooseIds,
          }).then(({ data }) => {
            if (data.code == 1) {
              this.$message({
                message: data.msg,
                type: "success",
              });
              this.getTree();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //弹出展示添加框
    showAddModel() {
      this.addOrUpdate = 1;
      this.form = {};
      this.dialogVisible = true;
      this.form = {
        pname: "主菜单",
        pid: -1,
        mtype: 0,
        mstate: 1,
      };
    },
    //展示编辑框
    showEdit(thisRow) {
      this.form = {};
      this.addOrUpdate = 0;
      this.http({
        url: "menu/one/" + thisRow.id,
        method: "get",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.form = data.data;
          this.dialogVisible = true;
        }
      });
    },
    //修改菜单
    updateMenu() {
      this.http({
        url: "menu/update",
        method: "put",
        data: this.form,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });

          this.dialogVisible = false;
          this.getTree();
        }
      });
    },
    //添加菜单
    addMenu() {
      this.http({
        url: "menu/save",
        method: "post",
        data: this.form,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });
          this.dialogVisible = false;
          this.from = {};
          this.getTree();
        }
      });
    },
    //修改状态
    changeState(thisRow) {
      this.http({
        url: "menu/update/state/" + thisRow.id,
        method: "put",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.getTree();
        }
      });
    },
    //选择父节点
    chooseParentId() {
      this.form.pname = this.chooseParam.pname;
      this.form.pid = this.chooseParam.id;

      this.showParentFlag = false;
    },
    //选择父节点框中的元素
    handleNodeClick(data) {
      this.chooseParam.id = data.id;
      this.chooseParam.pname = data.mName;
    },
    //展示父节点框
    showParentNode() {
      this.addTreeTable = this.treeTable;
      this.addTreeTable = [
        {
          children: this.treeTable,
          id: -1,
          mName: "主菜单",
          pid: -1,
        },
      ];
      this.showParentFlag = true;
    },
    //获得树结构数据
    getTree() {
      this.http({
        url: "menu/menuTree",
        method: "get",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.treeTable = data.data;
        }
      });
    },
  },
  mounted() {
    this.getTree();
  },
};
</script>

<style>
</style>
